<template>
	<view>
		<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 750rpx;height: 750rpx;" />
		<view style="margin: 15rpx;">
			<view class="myCard_msg">
				<view style="display: flex;justify-content: space-between;padding-left: 24rpx;padding-right: 24rpx;padding-top: 22rpx;">
					<view style="font-size: 30rpx;color: #EBBB73;">￥494000</view>
					<view style="font-size: 25rpx;color: #B4B4B4;">200人体验过</view>
				</view>
				<view style="padding-left: 24rpx;padding-top: 14rpx;padding-bottom: 14rpx;">
					<view style="font-size: 30rpx;font-weight: bold;">
						O2BOX微压富氧舱-S型
					</view>
					<view style="font-size: 25rpx;color: #959595;padding-top: 11rpx;">
						风靡全球的民用高压氧舱
					</view>
				</view>
			</view>
			
			<view class="syxz">
				<view style="display: flex;justify-content: space-between;align-items: center;font-size: 25rpx;padding: 14rpx;">
					<view style="display: flex;align-items: center;">
						<view class="section_line"></view>
						<view style="padding-left: 6rpx;">舱型</view>
					</view>
				</view>
				<view class="size-list">
					<view class="size-item">
						<view class="text-size" style="position: absolute;left: 27rpx;font-size: 60rpx;">S</view>
						<view class="other-text" style="position: absolute;left: 8rpx;top: 60rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="font-size: 15rpx;">Hyperbaric Oxygen Chamber</view>
							
								<view>
									<view style="font-size: 15rpx;"><text style="font-size: 50rpx;">o</text>2</view>
									<view style="font-size: 22rpx;">BOX</view>
								</view>
						</view>
					</view>
					<view class="size-item active">
						<view class="text-size" style="position: absolute;left: 27rpx;font-size: 60rpx;">M</view>
						<view class="other-text" style="position: absolute;left: 8rpx;top: 60rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="font-size: 15rpx;">Hyperbaric Oxygen Chamber</view>
							
								<view>
									<view style="font-size: 15rpx;"><text style="font-size: 50rpx;">o</text>2</view>
									<view style="font-size: 22rpx;">BOX</view>
								</view>
						</view>
					</view>
					<view class="size-item">
						<view class="text-size" style="position: absolute;left: 27rpx;font-size: 60rpx;">L</view>
						<view class="other-text" style="position: absolute;left: 8rpx;top: 60rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="font-size: 15rpx;">Hyperbaric Oxygen Chamber</view>
							
								<view>
									<view style="font-size: 15rpx;"><text style="font-size: 50rpx;">o</text>2</view>
									<view style="font-size: 22rpx;">BOX</view>
								</view>
						</view>
					</view>
					<view class="size-item">
						<view class="text-size" style="position: absolute;left: 27rpx;font-size: 60rpx;">XL</view>
						<view class="other-text" style="position: absolute;left: 8rpx;top: 60rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style="font-size: 15rpx;">Hyperbaric Oxygen Chamber</view>
							
								<view>
									<view style="font-size: 15rpx;"><text style="font-size: 50rpx;">o</text>2</view>
									<view style="font-size: 22rpx;">BOX</view>
								</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="myCard_msg" style="margin-top: 20rpx;padding-bottom: 34rpx;">
				<u-tabs :list="list1" style="width: 500rpx;" :scrollable="false"  lineWidth="30"
				lineColor="#FDCE9A"
				:activeStyle="{
				    color: '#000000',
				    fontWeight: 'bold',
				    transform: 'scale(1.01)'
				}"
				:inactiveStyle="{
				    color: '#7D7D7D',
				    transform: 'scale(1)'
				}"
				itemStyle="padding-left: 50rpx; padding-right: 50rpx;height:80rpx;"></u-tabs>
				<view style="padding-left: 45rpx;padding-top: 80rpx;padding-right: 21rpx;">
					<view  style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="../../../static/tab-my.png" style="width: 84rpx;height: 84rpx;border-radius: 50%;" />
							<view style="font-size: 25rpx;padding-left: 16rpx;">
								李子君<view style="padding-top: 5rpx;color: #8B8B8B;font-size: 20rpx;">3天前</view>
							</view>
						</view>
						<view>
							<image src="../../../static/shop/Group 38.png" style="width: 64rpx;height: 32rpx;" mode="aspectFill"></image>
						</view>
					</view>
					<view class="pl_context">
						近日，中央金融工作会议在北京举行。这是中央金融委员会、中央金融工作委员会组建后，首次召开的我国金融领域最高规格的一次会议。会议有这些新部署、新提法
					</view>
				</view>
				
				<view style="padding-left: 45rpx;padding-top: 80rpx;padding-right: 21rpx;">
					<view  style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="../../../static/tab-my.png" style="width: 84rpx;height: 84rpx;border-radius: 50%;" />
							<view style="font-size: 25rpx;padding-left: 16rpx;">
								李子君<view style="padding-top: 5rpx;color: #8B8B8B;font-size: 20rpx;">3天前</view>
							</view>
						</view>
						<view>
							<image src="../../../static/shop/Group 39.png" style="width: 64rpx;height: 32rpx;" mode="aspectFill"></image>
						</view>
					</view>
					<view class="pl_context">
						近日，中央金融工作会议在北京举行。这是中央金融委员会、中央金融工作委员会组建后，首次召开的我国金融领域最高规格的一次会议。会议有这些新部署、新提法
					</view>
				</view>
				
				<view style="padding-left: 45rpx;padding-top: 80rpx;padding-right: 21rpx;">
					<view  style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="../../../static/tab-my.png" style="width: 84rpx;height: 84rpx;border-radius: 50%;" />
							<view style="font-size: 25rpx;padding-left: 16rpx;">
								李子君<view style="padding-top: 5rpx;color: #8B8B8B;font-size: 20rpx;">3天前</view>
							</view>
						</view>
						<view>
							<image src="../../../static/shop/Group 40.png" style="width: 64rpx;height: 32rpx;" mode="aspectFill"></image>
						</view>
					</view>
					<view class="pl_context">
						近日，中央金融工作会议在北京举行。这是中央金融委员会、中央金融工作委员会组建后，首次召开的我国金融领域最高规格的一次会议。会议有这些新部署、新提法
						<view style="display: flex;padding-top: 24rpx;flex-wrap: wrap;">
							<view class="images" v-for="item in 4" :key="item"><image src="../../../static/user-bg.jpg" style="width: 100%;height: 144rpx;"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom_czss">
			<view class="goback"><image src="../../../static/shop/Frame.png" style="width: 40rpx; height: 40rpx;margin-left: 27rpx;" /><text style="padding-left: 9rpx;">返回店铺</text></view>
			<view class="gook">立即下单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '详情页',
				}, {
					name: '产品评价',
				}]
			};
		}
	}
</script>

<style lang="scss" scoped>
.myCard_msg{
	width: 719rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}
.syxz{
	margin-top: 20rpx;
	width: 719rpx;
	height: 253rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	.section_line{
		width: 7rpx;
		height: 25rpx;
		background: #FDCE9A;
	}
}
.size-list{
	display: flex;
	justify-content: space-between;
	padding: 16rpx;
	.size-item{
		width: 155rpx;
		height: 155rpx;
		background: #F5F5F5;
		border-radius: 15rpx;
		color: #9E9E9E;
		position: relative;
		.text-size{
			color: #9E9E9E;
		}
		.other-text{
			color: #9E9E9E;
		}
	}
	.active{
		background: #000000;
		border: 2rpx solid #FDCE9A;
		.text-size{
			color: #FDCE9A;
		}
		.other-text{
			color: #fff;
		}
	}
}
.pl_context{
	width: 653rpx;
	padding: 19rpx;
	background: #D9D9D9;
	border-radius: 10rpx;
	margin-top: 10rpx;
	font-size: 20rpx;
	line-height: 32rpx;
	.images{
		width: 144rpx;
		height: 144rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		margin-bottom: 20rpx;
	}
}
.bottom_czss{
	width: 750rpx;
	height: 124rpx;
	background: #000000;
	margin-top: 60rpx;
	padding-top: 33rpx;
		font-size: 25rpx;
	display: flex;
	align-items: center;
	.goback{
		display: flex;
		align-items: center;
		width: 218rpx;
		height: 69rpx;
		border-radius: 10rpx;
		border: 2rpx solid #FDCE9A;
		text-align: center;
		line-height: 69rpx;
		margin-left: 73rpx;
		color: #FDCE9A;
	}
	.gook{
		width: 350rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		margin-left: 33rpx;
		color: #fff;
		background: url('../../../static/shop/Rectangle 221.png') no-repeat;
		background-size: cover;
	}
}
</style>
